<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js 获取DOM元素</title>
        
        <script src="../../../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <son ref="mySon"></son>
            <button @click="showMoney">靠近钱包</button>
        </div>
        
        <script>
            var son = {
                data() {
                    return {
                        money: 100
                    }
                },
                template: '<div>儿子的钱包总共有：<span ref="sonMoney">{{ money }}</span>元</div>'
            };
            new Vue({
                el: '#app',
                methods: {
                    showMoney() {
                        alert("你获得了金钱：" + this.$refs.mySon.money);
                        this.$refs.mySon.money = 0;
                    }
                },
                components: {
                    son
                }
            });
        </script>
    </body>
</html>